<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="Shortcut Icon" href="./image/favicon.ico"  type="image/x-icon" />
    <link rel="Bookmark" href="./image/favicon.ico" type="image/x-icon" />
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/pnotify/3.2.1/pnotify.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/pnotify/3.2.1/pnotify.buttons.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/app.css">
    <title>JTrace</title>
</head>

<body>
<div class="container">
    <div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">JTrace</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">分享本网站</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- 面板-->
    <div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">参数查询</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">参数评估</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">定制参数</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">热门参数</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- 参数查询框 -->
            <div role="tabpanel" class="tab-pane active" id="home" style="padding-top: 20px">
                <div >
                    <form>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">查询框</label>
                            <input type="text" data-provide="typeahead" autocomplete="off" class="form-control" id="parameter" placeholder="verbose:gc">
                        </div>
                    </form>
                </div>

                <div class="panel panel-success" id="result">
                    <div class="panel-heading">verbose:gc&nbsp;&nbsp;<span class="badge badge-primary">jdk8</span>&nbsp;&nbsp;<span class="badge label-info">false</span></div>
                    <div class="panel-body">
                        <p><span class="label label-danger">例子</span>&nbsp;&nbsp;-verbose:gc</p>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <span class="label label-success">含义</span>&nbsp;&nbsp;输出虚拟机中GC的详细情况
                        </li>
                        <li class="list-group-item">
                            <span class="label label-warning">扩展</span>&nbsp;&nbsp;-verbose:gc的VM等价参数是-XX:+PrintGC
                        </li>
                        <li class="list-group-item">
                            <span class="label label-primary">使用</span>&nbsp;&nbsp;-verbose:gc 输出虚拟机中GC的详细情况，例如:[Full GC 168K->97K(1984K)， 0.0253873 secs],箭头前后的数据168K和97K分别表示垃圾收集GC前后所有存活对象使用的内存容量，说明有168K-97K=71K的对象容量被回收，括号内的数据1984K为堆内存的总容量，
                            收集所需要的时间是0.0253873秒（这个时间在每次执行的时候会有所不同），因此打印的日志不是十分详细，比如GC的时间点就不会打印
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 参数诊断框 -->
            <div role="tabpanel" class="tab-pane" id="profile" style="padding-top: 20px">
                    JDK版本:
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="jdkVersion" value="jdk7"> JDK7
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="jdkVersion" value="jdk8" checked> JDK8
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="jdkVersion" value="jdk9"> JDK9
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="jdkVersion" value="jdk10"> JDK10
                        </label>
                    </div>
                    物理内存:
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="totalMem" value="2"> 2G
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="totalMem" value="4" checked> 4G
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="totalMem" value="8"> 8G
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="totalMem" value="12"> 12G+
                        </label>
                    </div>
                    输入Java进程的参数:
                    <div class="form-group">
                        <textarea  style="font-size:1px" id="parameters" class="form-control" rows="5" placeholder="查看JVM启动参数: ps -ef| grep java"></textarea>
                    </div>
                <div id="result2" hidden>
                    <div class="panel panel-default" >
                        <!-- Default panel contents -->
                        <div class="panel-heading">诊断结果</div>
                        <div class="panel-body">
                            <p id="totalResult"></p>
                        </div>
                        <!-- Table -->
                        <table class="table" id="result2-table">
                            <thead>
                            <tr>
                                <th>#</th><th>级别</th><th>诊断项目</th><th>诊断概要</th><th>诊断详情</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="information">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                                <h4 class="modal-title">诊断结果</h4>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="modelText1" class="control-label">意见:</label>
                                        <textarea class="form-control" id="modelText1" style="width: 100%; height: 50px ;overflow: auto;word-break: break-all; resize: none;" readonly></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="modelText2" class="control-label">tips:</label>
                                        <textarea class="form-control" id="modelText2" style="width: 100%; height: 50px ;overflow: auto;word-break: break-all; resize: none;" readonly></textarea>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">规划中...</div>
            <div role="tabpanel" class="tab-pane" id="settings">规划中..</div>
        </div>
    </div>

    <footer class="footer">
        <p align="center">&copy; 2019-2020</p>
    </footer>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script src="https://cdn.staticfile.org/pnotify/3.2.1/pnotify.js"></script>
<script src="https://cdn.staticfile.org/pnotify/3.2.1/pnotify.buttons.js"></script>
<script src="https://cdn.staticfile.org/pnotify/3.2.1/pnotify.confirm.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
